<template>
  <div>
    <el-table v-loading="isLoading" :data="queryResult" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="学院："><span>{{ props.row.department }}</span></el-form-item>
            <el-form-item label="年级："><span>{{ props.row.grade }}</span></el-form-item>
            <el-form-item label="专业："><span>{{ props.row.profession }}</span></el-form-item>
            <el-form-item label="班级："><span>{{ props.row.className }}</span></el-form-item>
            <el-form-item label="学号："><span>{{ props.row.stuNumber }}</span></el-form-item>
            <el-form-item label="姓名："><span>{{ props.row.stuName }}</span></el-form-item>
            <el-form-item label="性别："><span>{{ props.row.gender }}</span></el-form-item>
            <el-form-item label="身份证："><span>{{ props.row.stuIdNumber }}</span></el-form-item>
            <el-form-item label="入学年级："><span>{{ props.row.admissionGrade }}</span></el-form-item>
            <el-form-item label="归属年级："><span>{{ props.row.belongGrade }}</span></el-form-item>
            <el-form-item label="学制："><span>{{ props.row.educationalSystem }}</span></el-form-item>
            <el-form-item label="培养层次："><span>{{ props.row.cultureLevel }}</span></el-form-item>
            <el-form-item label="教育类型："><span>{{ props.row.educationalType }}</span></el-form-item>
            <el-form-item label="状态："><span>{{ props.row.status }}</span></el-form-item>
            <el-form-item label="备注："><span>{{ props.row.systemDescription }}</span></el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <af-table-column prop="department" label="学院"></af-table-column>
      <af-table-column prop="grade" label="年级"></af-table-column>
      <af-table-column prop="stuNumber" label="学号"></af-table-column>
      <af-table-column prop="stuName" label="姓名"></af-table-column>
      <af-table-column prop="className" label="班级"></af-table-column>
      <af-table-column prop="gender" label="性别"></af-table-column>
      <af-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="modify_stu_info(scope.row)" type="primary" size="small">修改</el-button>
          <el-button @click="delete_stu_info_confirm(scope.row.stuNumber)" type="danger" size="small">删除</el-button>
        </template>
      </af-table-column>
    </el-table>

    <!--弹框组件-->
    <Form :form_component="form_controller" @reload_data_request="reload_data"/>
  </div>
</template>

<script>
import Form from "@/components/student/Form";//引入Info组件
export default {
  name: "Home",
  //queryResult:查询到的学生信息，isLoading:是否显示加载动画
  props: ['queryResult','isLoading'],
  data() {
    return {
      //表格数据示例，以下内容不是真实显示的数据
      tableData: [{
        department: '地理与资源科学学院',
        grade: 2017,
        profession: '地理科学',
        className: '地17.2',
        stuNumber: '20161541045',
        stuName: '王发展',
        gender: '男',
        stuIdNumber: '510101200101010001',
        admissionGrade: 2017,
        belongGrade: 2017,
        educationalSystem: 4,
        cultureLevel: '本科',
        educationalType: '普教',
        status: '在读',
        systemDescription: '',
        remarks: ''
      }],
      //表单相关设置
      form_controller:{
        dialogFormVisible: false,//是否显示
        formTitle:'',//表单标题:根据当前操作设置
        formData: {},//表单数据:由具体操作方法传值
        formLabelWidth: '80px',//标签宽度，不是输入框宽度
      }

    }
  },
  methods: {
    modify_stu_info(row){
      this.form_controller.formTitle = "修改学生信息";
      this.form_controller.formData = row;
      this.form_controller.dialogFormVisible = true;
    },
    delete_stu_info_confirm(stuNumber){
      let delete_is_success;

      this.$confirm('此操作将永久删除该条学生信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //单击确定则删除信息
        this.delete_stu_info(stuNumber,(return_data)=>{
          delete_is_success = return_data;
          if (delete_is_success){
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            //调用父组件的方法来重新获取信息(不能用驼峰命名)
            this.$emit('reload_data');
          }else {
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delete_stu_info(stuNumber,callback){
      //定义请求参数
      let params = new URLSearchParams();
      params.append('stuNumber', stuNumber);
      //向后台发送post请求删除学生信息
      this.$ajax.post(this.$server + "/student/deleteByStuNumber", params)
          .then(res => {
             callback(res.data);
          })
          .catch(error => {
            console.log("发生错误：" + error)
            this.msg = error
            callback(false);
          });
    },
    add_stu_info(){
      this.form_controller.formTitle = "新增学生信息";
      this.form_controller.formData = {};//清空表单数据
      this.form_controller.dialogFormVisible = true;
    },
    reload_data(){
      this.$emit('reload_data');
    }
  },
  components: {
    Form
  },
  created() {

  }
}
</script>

<style scoped>
  .el-table{
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    padding-left: 20px;
    margin-right: 0;
    margin-bottom: 0;
    width: 30%;
  }
</style>